<template>
	<view class="coun">
		<view class="topitem" v-for="(item,index) in listdata" :key="index">
			<view class="">
				<view class="ite">
					<view class="bom">
						A
					</view>
					<view class="top">
						流速：{{item.a.dianliusu}}
					</view>
					<view class="top">
						用时：{{item.a.yongshi}}
					</view>
				</view>
				<view class="ite">
					<view class="bom">
						B
					</view>
					<view class="top">
						流速：{{item.b.dianliusu}}
					</view>
					<view class="top">
						用时：{{item.b.yongshi}}
					</view>
				</view>
				<view class="ite">
					<view class="bom">
						C
					</view>
					<view class="top">
						流速：{{item.c.dianliusu}}
					</view>
					<view class="top">
						用时：{{item.c.yongshi}}
					</view>
				</view>
				<view class="ite">
					<view class="pjun">
						点平均流速：{{item.aveTy}}
					</view>
				</view>
				<!-- 				<view class="ite">
					<view class="pjun">
						平均时间：{{item.time}}
					</view>
				</view> -->
			</view>
			<view class="" style="width: 1rpx;height: 250rpx;background-color: #dfdfdf;">

			</view>
			<view class="rite">
				<view class="rt">
					{{item.b.cedian.nub}}
				</view>
				<view class="rb">
					测线
				</view>
			</view>
		</view>
		<view class="shuiinput">
			<text>输入水深：</text>
			<view class="" style="width: 440rpx;">
				<u--input placeholder="请输入水深" type="digit" v-model="wD"></u--input>
			</view>

		</view>
		<view class="liusliang">
			<text>平均流量：</text>
			<text class="text">{{liusliangnub}}</text>
		</view>
		<view class=""
			style="width: 690rpx;display: flex;justify-content: space-around;align-items: center;margin: 30rpx 0 50rpx 0;">
			<!-- 			<view class="" style="width: 300rpx;" @click="upyun(3)">
				<u-button color="#31ab7c" type="primary" shape="circle" text="上传到云"></u-button>
			</view> -->
			<view class="" style="width: 600rpx;">
				<u-button @click="calculateFlow" color="#5a9fa6" type="primary" shape="circle" text="开始计算"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		cezhanInfo
	} from '@/common/cezhanlist.js';

	export default {
		data() {
			return {
				liusliangnub: 0,
				wD: 1,
				listdata: [],
				vuexcexian: [],
				vlArr: [],
				cezhanObj: {}
			}
		},
		onLoad(option) {
			// 测站信息
			this.cezhanObj = this.vuex_cezhanInfo
			console.log('cezhanObj',this.cezhanObj);
			// 几点法计算
			this.vuexcexian = this.vuex_cexian
			this.upyun(option.dianfa)
			console.log('vuex_cexian',this.vuex_cexian);
			// 测试
			// this.vuexcexian = cezhanInfo
			// this.upyun(1)
		},
		methods: {
			upyun(data) {
				if (data == 3) {
					let cexian = this.vuexcexian
					let result = [];
					for (let i = 0; i < cexian.length; i += 3) {
						let obj = {
							a: cexian[i],
							b: cexian[i + 1],
							c: cexian[i + 2],
							aveTy: ((cexian[i].dianliusu + cexian[i + 1].dianliusu + cexian[i + 2].dianliusu) / 3)
								.toFixed(4),
							time: ((cexian[i].yongshi * 1 + cexian[i + 1].yongshi * 1 + cexian[i + 2].yongshi * 1) / 3)
								.toFixed(2)
						}

						result.push(obj);
					}
					this.listdata = result
					// uni.$u.vuex('vuex_liusuInfo', result)
					// 平均值
					// for(let i in result){
					// 	console.log('iiii',i);
					// }
				} else {
					let cexian = this.vuexcexian
					let result = [];
					for (let i = 0; i < cexian.length; i++) {
						let obj = {
							a: {
								dianliusu: '',
								yongshi: '',
							},
							b: cexian[i],
							aveTy: cexian[i].dianliusu,
							time: cexian[i].yongshi,
							c: {
								dianliusu: '',
								yongshi: '',
							}
						}

						result.push(obj);
					}
					this.listdata = result
					// uni.$u.vuex('vuex_liusuInfo', result)
					console.log('数组this.listdata', this.listdata);
				}

			},
			// 计算流量
			calculateFlow() {
				console.log('计算');
				if (this.wD <= 0) {
					uni.showToast({
						icon: 'fail',
						title: '水深未输入',
						duration: 1500
					});
					return
				}
				let vls = this.listdata
				console.log('点流速vls',vls);
				console.log('测线+++',this.cezhanObj);
				let vlAll = []
				let vl0 = null
				let vl1 = null
				let vlz = null
				let vln = null
				let vln1 = null
				let vln2 = null
				
				// 不参与循环
				// cot
				let sin27LL = Math.sin(this.cezhanObj.lSA  * Math.PI / 180)
				let cos27LL = Math.cos(this.cezhanObj.lSA  * Math.PI / 180)
				let areaLL = cos27LL/sin27LL //三角面积L
				
				let sin27RR = Math.sin(this.cezhanObj.rSA  * Math.PI / 180)
				let cos27RR = Math.cos(this.cezhanObj.rSA  * Math.PI / 180)
				let areaRR = cos27RR/sin27RR //三角面积R
				// VL0
				vl0 = 0.5 * this.wD* this.wD * areaLL * (vls[0].aveTy * 1) * (this
					.cezhanObj.vmL * 1) * (this.cezhanObj.kL * 1)
				vlAll.push(vl0.toFixed(6) * 1)
				console.log('VL0',vl0.toFixed(6) * 1);
				
				//VL1
				vl1 = 0.5 * [(vls[0].aveTy * 1) * (this.cezhanObj.vmL * 1) + (vls[0].aveTy * 1)*(this.cezhanObj.cexianlist[0].vM * 1)] * (this.wD) * (this.cezhanObj.cexianlist[0].cR * 1)
				vlAll.push(vl1.toFixed(6) * 1)
				console.log('VL1',vl1.toFixed(6) * 1);
				
				
				// 中间逻辑
				if(vls.length > 1){
					// for (let i = 0; i < (vls.length + 1); i++) {
						
					// 	vlz = 0.5 * [(vls[i - 2].aveTy * 1) * (this.cezhanObj.cexianlist[i - 2].vM * 1) + (vls[i - 1]
					// 		.aveTy * 1) * (this.cezhanObj.cexianlist[i - 1].vM * 1)] * (this.wD) * [(this
					// 		.cezhanObj.cexianlist[i - 1].cR * 1) - (this.cezhanObj.cexianlist[i - 2].cR * 1)]
					// 	vlAll.push(vlz.toFixed(6) * 1)
					// 	console.log('VLz', i,vlz.toFixed(6) * 1);
					// }
					for (let i = 0; i < vls.length-1; i++) {
						console.log('iiiiii',i);
						vlz = 0.5 * [(vls[i].aveTy * 1) * (this.cezhanObj.cexianlist[i].vM * 1) + (vls[i+1].aveTy * 1)*(this.cezhanObj.cexianlist[i+1].vM * 1)] * (this.wD) * [(this.cezhanObj.cexianlist[i+1].cR * 1)-(this.cezhanObj.cexianlist[i].cR * 1)]
				vlAll.push(vlz.toFixed(6) * 1)
					}
				}
				
				
				//VLN+1
				vln1 = 0.5 * [(vls[vls.length-1].aveTy * 1) * (this.cezhanObj.vmR) + (vls[vls.length-1]
					.aveTy * 1) * (this.cezhanObj.cexianlist[vls.length-1].vM * 1)] * (this.wD) * [(this
					.cezhanObj.qudikuandu * 1) - (this.cezhanObj.cexianlist[vls.length-1].cR * 1)]
				vlAll.push(vln1.toFixed(6) * 1)
				console.log('VLN+1',vln1.toFixed(6) * 1);
				
				
				//VLN+2
				vln2 = 0.5 * this.wD* this.wD * areaRR * (vls[vls.length-1].aveTy * 1) * (this
					.cezhanObj.vmR * 1) * (this.cezhanObj.kR * 1)
				vlAll.push(vln2.toFixed(6) * 1)
				console.log('VLN+2',vln2.toFixed(6) * 1);
				

				console.log('数组vlAll', vlAll);
				// 计算总平均流速
				let vlQitem = []
				let vlQArr = []
				let vlQALL = []
				
				// for (let i = 0; i < vlAll.length - 1; i++) {
				// 	let vlQitem = vlAll[i] + vlAll[i + 1]
				// 	vlQArr.push(vlQitem.toFixed(6) * 1)
				// }
				// console.log('vlQArr', vlQArr);
				// for (let i = 0; i < vlQArr.length; i++) {
				// 	let vlQNub = 0
				// 	vlQNub += vlQArr[i] * 0.5
				// 	console.log('vlQNub',i,vlQNub);
				// 	vlQALL.push(vlQNub)
				// }
				// this.liusliangnub = (vlQNub * (this.cezhanObj.qk * 1)).toFixed(6) * 1
				// console.log('流速', vlQALL)
				
				 let sum = 0;
				    for(let i = 0;i<vlAll.length;i++){
				        sum += vlAll[i]; 
				    }
					this.liusliangnub = sum.toFixed(6) * 1
				console.log('sum',sum.toFixed(6) * 1);
			}
		}
	}
</script>
<style scoped lang="scss">
	.coun {
		padding: 30rpx;

		.topitem {
			width: 650rpx;
			// height: 180rpx;
			padding: 20rpx;
			margin-bottom: 40rpx;
			border-radius: 50rpx;
			border: #ffffff solid 2rpx;
			box-shadow: 10rpx 10rpx 20rpx 5rpx #dfe6f0;
			background-color: #f4f6f8;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.ite {
				// width: 160rpx;
				// line-height: 60rpx;
				// text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;

				// background-color: #f0cfb9;
				.top {
					width: 200rpx;
					margin: 0 15rpx;
					font-size: 30rpx;
					color: #000000;
					// background-color: #b9f08b;
				}

				.bom {
					width: 50rpx;
					height: 50rpx;
					margin: 6rpx 0;
					text-align: center;
					line-height: 50rpx;
					font-size: 30rpx;
					border-radius: 50rpx;
					color: #ffffff;
					background-color: #ff8408;
				}

				.pjun {
					background-color: #75b9ac;
					border-bottom: 10rpx solid #60988d;
					color: #ffffff;
					font-size: 40rpx;
					margin: 5rpx 0;
					padding: 10rpx 20rpx;
					border-radius: 50rpx;
				}
			}

			.rite {
				// width: 120rpx;
				line-height: 60rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.rt {
					width: 60rpx;
					height: 60rpx;
					font-size: 40rpx;
					text-align: center;
					color: #ffffff;
					border-radius: 100rpx;
					border: #fff solid 2rpx;
					background-color: #ff9727;
					box-shadow: 5rpx 5rpx 20rpx #ffaf69;

				}

				.rb {
					font-size: 30rpx;
					color: #747a83;
				}
			}
		}

	}

	.liusliang {
		font-family: 'MyFont';
		// background-color: #e6f2f4;
		border: #fff solid 2rpx;
		padding: 20rpx 0 0 20rpx;

		font-size: 40rpx;
		color: #43777c;
		border-radius: 20rpx;
		box-shadow: 10rpx 10rpx 20rpx 5rpx #dfe6f0;
		display: flex;
		align-items: center;

		// justify-content: center;
		.text {
			font-size: 80rpx;
		}
	}

	.shuiinput {
		display: flex;
		align-items: center;
		height: 120rpx;
		// justify-content: center;
		border: #fff solid 2rpx;
		padding-left: 20rpx;
		margin-bottom: 30rpx;
		font-size: 40rpx;
		color: #43777c;
		border-radius: 20rpx;
		box-shadow: 10rpx 10rpx 20rpx 5rpx #dfe6f0;
	}
</style>
<style>
	@font-face {
		font-family: 'MyFont';
		src: url('@/static/fonts/LED.otf');
	}

	page {
		background-color: #f4f6f8;
	}
</style>